<template>
    <div class="addMajor">
        <el-dialog v-model="openMajorDialog" :title="title" width="500" :close-on-click-modal='false'>
            <el-form ref="majorFormRef" style="max-width: 600px"  destroy-on-close :model="majorForm" :rules="majorRules"
                label-width="auto">
                <el-form-item label="专业名称" prop="name">
                    <el-input @input="handleInput" placeholder="请填写专业名称" v-model.trim="majorForm.name" />
                </el-form-item>

                <!-- <el-form-item label="专业ID" prop="code">
                    <el-input placeholder="请填写专业ID" v-model="majorForm.code" />
                </el-form-item> -->

                <el-form-item label="专业顺序" prop="sort">
                    <el-input-number @input="handleInput" v-model="majorForm.sort" class="mx-4" :min="1"
                        controls-position="right" />
                </el-form-item>



                <el-form-item label="专业状态" prop="status">
                    <el-radio-group @change="handleInput"  v-model="majorForm.status">
                        <el-radio :value="0">正常</el-radio>
                        <el-radio :value="1">停用</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="备注" prop="notes">
                    <el-input @input="handleInput" v-model.trim="majorForm.notes" />
                </el-form-item>


            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button :disabled="isDisabled" type="primary" @click="onAddMajor">
                        <span v-if="majorId">修改</span>
                        <span v-else>新增</span>
                    </el-button>
                    <el-button @click="openMajorDialog = false">取消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, watch } from "vue"
import { addMajor, marjorDetail, upMarjor } from "@/api/admin/major"
import { ElMessage } from "element-plus";

const isDisabled=ref(true)
const props = defineProps({
    title: {
        type: String
    },
    majorListData: {
        type: Array
    },
    majorId: {
        type: Number
    }
})


const majorForm = ref({
    name: "",
    sort: Math.max(...props.majorListData.map(obj => obj.sort)) + 1,
    code: "",
    status: 0,
    notes: ""

})

const { proxy } = getCurrentInstance();
const openMajorDialog = ref(false)
const emits = defineEmits(['onAddSuccess'])
defineExpose({
    openMajorDialog,
    majorForm
})


// // 监听点击修改传来的id
watch(() => props.majorId, (nv) => {
    console.log(nv);
    if (nv) {
        marjorDetail(nv).then(res => {
            console.log(res);
            res.status=Number(res.status)
            
            majorForm.value = res
        })
    }
}, {
    deep: true,
})

const majorRules = ref({

    name: [
        { required: true, message: '专业名称必须填写', trigger: "blur" },
    ],
    sort: [
        { required: true, message: '专业顺序必须填写', trigger: "blur" },
    ],
    code: [
        { required: true, message: '专业ID必须填写', trigger: "blur" },
    ]
});

// 内容改变
const handleInput=()=>{
    isDisabled.value=false

}

// 新增专业
const onAddMajor = () => {
   
    proxy.$refs.majorFormRef.validate(valid => {
        let option = {
            "marjor": majorForm.value
        }
        if (valid) {
            isDisabled.value=true
            if (!props.majorId) {
                addMajor(option).then(res => {
                    console.log(res);
                    if(res.response){
                        ElMessage.error(res.response.data)
                        return
                    }    
                    ElMessage.success("添加成功")
                    openMajorDialog.value = false
                    emits("onAddSuccess")
                })

            } else {
                majorForm.value.id = props.majorId
                let option = {
                    "marjor": majorForm.value
                }

                upMarjor(option).then(res => {
           
                    ElMessage.success("修改成功")
        
                    openMajorDialog.value = false
                    emits("onAddSuccess")
                })
            }
            return
        }
        ElMessage.error("请按要求填写")
    })
}


</script>

<style lang="scss" scoped></style>